<template>
  <div class="tabbar">
      <router-link tag="div" class="item" v-for="(item,index) in 4" :key="index" :to="itemTo[item-1]">
          <span>{{itemTexr[item-1]}}</span>
      </router-link>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data () {
    return {
      itemTexr: ['推荐', '歌手', '排行', '搜索'],
      itemTo: ['/recommend', '/singer', '/rank', '/search']
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/variable";
@import "../assets/css/mixin";
.tabbar{
    width: 100%;
    height: 84px;
    @include bg_sub_color();
    display: flex;
    justify-content: space-around;
    position: relative;
    .item{
        span{
            line-height: 84px;
            @include font_size($font_medium);
            @include font_color();
        }
        &.router-link-active{
            span{
                @include font_active_color()
            }
            border-bottom: 5px solid #000;
            @include border_color()
        }
    }
}
</style>
